<template>
	<view class="container productSort" :style="viewColor">
		<view class="navbar" :style="{ height: navH + 'rpx', opacity: opacity }">
			<view class="navbar-title" :style="'height:' + navH + 'rpx;'">
				<view class="display-flex display-flex-align-center" :style="'margin-top:'+(homeTop)+ 'rpx;'">{{hotelInfo?hotelInfo.name:'景点详情'}}</view>
			</view>
		</view>
		<!-- #ifndef MP-ALIPAY || MP-BAIDU-->
		
		<view class="head-wrapper" id="home" :style="{ top: homeTop + 'rpx' }">
			<view class="head-menu-new" :style="{color: (opacity > 0.7 ?'#000' :'#fff'),background:  (opacity > 0.7 ?'#fff' :'rgba(0, 0, 0, .25)'),border: (opacity>0.7?'none':'')}">
				<view class='iconfont icon-ic_left' @click="back()"></view>
			</view>
		</view>
		<!-- #endif -->
		
		<view class="carousel " style="background-color: #9d9d9d;">
			<swiper v-if="hotelInfo.slider_image &&hotelInfo.slider_image.length "  circular=true duration="400">
				<swiper-item @click="preHotelImage(hotelInfo.slider_image,0)"  class="swiper-item" v-for="(item,index) in hotelInfo.slider_image" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<swiper v-else circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in [no_image]" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view v-if="hotelInfo" class=" " style="margin: 0 6px;border-radius: 8px;">
			<view class="introduce-block display-flex-column " style="">
				<view class="row-center u-skeleton-rect" style="height: 40px;margin: 0 15px;">
					<text style="font-size: 18px;font-weight: 600;">{{hotelInfo.name}}</text>
					<!-- <view class="grade-block" v-if="hotelInfo.grade"><text>{{hotelInfo.grade}}</text></view> -->
				</view>
			
				<view  class="skeleton-rect item_tags acea-row line1 mb-10 ml-15">
					<text v-if="hotelInfo.open_year" class="tags_item labels" >{{hotelInfo.open_year}}年</text>
					<text v-if="hotelInfo.dr_year" class="tags_item labels" >{{hotelInfo.dr_year}}年</text>
					<text v-if="hotelInfo.room_num" class="tags_item labels" >{{hotelInfo.room_num}}间</text>
				</view>
				<view v-if="hotelInfo.tel" class="display-flex display-flex-align-center ml-15 mb-10">
					<text class="iconfont icon-ic_phone text-12 mr-10 phone-text"></text>
					<text @click="callPhone(tl)" class="text-12 mr-10" v-for="(tl,tlIndex) in hotelInfo.tel" :key="tlIndex">{{tl}}</text>
				</view>
				<view class="row-center address-box " style="height: 70px;margin: 5px 15px;border-radius: 5px;">

					<view v-if="hotelInfo.address" class="u-skeleton-rect " style="margin-left: 10px;">
						<view style="color: #000;font-size: 12px;" class="text-ellipsis" v-if="hotelInfo.address">{{hotelInfo.address}}</view>
						<view style="font-size: 10px;color: #908d8d;margin-top: 5px;" v-if="hotelInfo.dis">
							距您{{hotelInfo.dis}}公里
						</view>
					</view>
					<view @click="goScenicArea(hotelInfo.lng,hotelInfo.lat,hotelInfo.name)" class="display-flex-column u-skeleton-rect" style="margin-left: auto;margin-right: 10px;align-items: center;">
						<image style="width: 16px;height: 16px;" src="https://qiniu.gzyxly.cn/attach/2025/11/16/156876be9ccb076370d2da645750a138.webp" mode=""></image>
						<view class="" style="color: #343434;font-size: 12px;font-weight: 400;margin-top: 5px;">
							<text>地图</text>
						</view>
					</view>
			
				</view>
			
			</view>
			
		</view>
		<!-- #ifdef MP-ALIPAY -->
		<f-sticky :scrollTop="scrollTop" :offsetTop="navH">
			<view class="scrbox" style="z-index: 2"  >
				<scroll-view class="scrollbox" scroll-with-animation="true" scroll-x="true" :scroll-left="tabLeft">
					<view class="tabbox">
						<view :class="{ 'tabbox-tab': true, 'tab-filled': item.filled }" v-for="(item, index) of tabList" :key="index" @click="pageScroll(index)">{{ item.title }}</view>
					</view>
				</scroll-view>
			</view>
		</f-sticky>
		<!-- #endif -->
		<!-- #ifndef MP-ALIPAY -->
		<view class="scrbox" style="z-index: 2"  :style="{ top: navH + 'rpx' }">
			<scroll-view class="scrollbox" scroll-with-animation="true" scroll-x="true" :scroll-left="tabLeft">
				<view class="tabbox">
					<view :class="{ 'tabbox-tab': true, 'tab-filled': item.filled }" v-for="(item, index) of tabList" :key="index" @click="pageScroll(index)">{{ item.title }}</view>
				</view>
			</scroll-view>
		</view>
		<!-- #endif -->
		<view class="artbox">
			<view class="article" v-for="(itemt, indext) of tabList" :key="indext">
				<!-- 预定房型 -->
				<view  v-if="itemt.indext==0" class="bg-white">
					<view @click="openDate"  style="height: 40px;" class="mt-10 mb-10 display-flex display-flex-align-center display-flex-justify-space-around">
						<view class="">
							<text class="text-black ft-w700 text-16 mr-5">{{mdStartDate}}</text>
							<text class="color-999 text-12">{{mdStartDateDsc}}</text>
						</view>
						<view class="hotel-day">
							<text>{{dayCount}}晚</text>
						</view>
						<view class="">
							<text class="text-black ft-w700 text-16 mr-5">{{mdEndDate}}</text>
							<text  class="color-999 text-12  ">{{mdEndDateDsc}}</text>
						</view>
						<view class="iconfont icon-ic_right">
							
						</view>
					</view>
					<view class="" v-if="roomTypeList &&roomTypeList.length">
						<view  class="mb-5 regular-block"v-for="(item, index) in roomTypeList" :key="index" >
							<view  @click="showDetail(index)"  class="display-flex regular-item ">
								<view  class="relative " @click.stop="preRoomImage(item.slider_image,0)">
									<image class="image-hotel" :src="item.slider_image[0]">
										
									</image>
									<view class="image-num-box">
										<view class="image-num">
											{{item.slider_image.length}}
										</view>
									</view>
									
								</view>
							

								<view class="display-flex-column mt-10" style="width: 100%">
									<view class="display-flex display-flex-align-start relative stop_name" >
										<view class="text-black ft-w700 line2 mr-10" >
										    {{item.name}}
										</view>
										<view class="ml-auto mr-10 ">
											<view  v-if="!item.is_open" class="iconfont icon-xiangxia"></view>
											<view  v-if="item.is_open" class="iconfont icon-xiangshangshouqi-xianxingyuankuang"></view>
										</view>
									</view>
								
						
									<view  class="row-center" style="color: #474747;font-size: 12px;">
									   <text class="mr-2">{{item.bed_type}}</text>
									   <text class="mr-2">{{item.area}}㎡</text>
									   <text class="mr-2">{{item.max_guests}}人入住</text>
									</view>
									<view class="mr-10" style="color: #fd7d21;text-align: right;">
										<!-- <priceFormat class="ml-auto mr-10" :price="item.adult_price" weight intSize="40" floatSize="20" labelSize="26"></priceFormat> -->
									    <priceFormat class="ml-auto mr-2" :price="item.price" weight intSize="40" floatSize="20" labelSize="26"></priceFormat>
										<text class="text-10">起</text>
									</view>
									
								</view>
							   <!-- <view class="display-flex-column hotel-price"  >
									<view  v-if="!item.is_open" class="iconfont icon-xiangxia"></view>
									<view  v-if="item.is_open" class="iconfont icon-xiangshangshouqi-xianxingyuankuang"></view>
							    	<view class="" style="color: #fd7d21;text-align: right;">
							    	    <priceFormat class="ml-auto mr-2" :price="item.price" weight intSize="40" floatSize="20" labelSize="26"></priceFormat>
										<text class="text-10">起</text>
									</view>
							    </view> --> 
							</view>
							<view class="de-block " v-if="item.is_open">
								<view :class="!meal.is_buy?'filter':''" v-if="item.hotelRoomPackages && item.hotelRoomPackages.length"
								 class="" 
								 v-for="(meal,mealIndex) in item.hotelRoomPackages" :key="mealIndex">
									<view class="display-flex tc-block">
										<view class="tc-bl-left">
											<div class="text-14 display-flex display-flex-align-center">
												<view class="text-black ft-w700">{{meal.name}}</view>
												<view class="shu-hotel"></view>
												<view class="text-cancel">
													入住当天{{hotelInfo.refund_time}}前可免费取消
												</view>
											</div>
										
											<div class=" text-12 mt-5">
												<text style="color: #343434;">{{meal.description}}</text>
											</div>
										</view>
										<view class="tc-bl-right">
											<view class="tc-price" >
												<priceFormat class="ml-auto " :price="meal.price" weight intSize="40" floatSize="20" labelSize="26"></priceFormat>
											</view>
											<view v-if="meal.is_buy" class="yud-button" @click.top="toRegularDetail(item, meal)">
												订
											</view>
											<view v-if="!meal.is_buy" class="no-yud-button" @click.top="toRegularDetail(item, meal)">
												订
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="pb-20">
						<emptyPage title="暂无符合条件的房型～" :noImage="`${domain}/static/images/noRecord.png`"></emptyPage>
						
					</view>
				
				</view>
				<!-- 预定房型 -->
				<!-- 酒店介绍 -->
				<view  v-if="itemt.indext==1"  class="bg-white pb-20 mt-10">
					<view class="display-flex display-flex-align-center pd-10">
						<view class="text-16 text-black ft-w700">
							酒店介绍
						</view>
					</view>
					<view v-if="hotelInfo.hotel_detail" class="centent-list">
						<!-- <view style="width: 100%;overflow: hidden;" v-html="hotelInfo.scenic_detail"></view>	 -->
						<jyf-parser :html="hotelInfo.hotel_detail" ref="article" :tag-style="tagStyle"></jyf-parser>
					</view>
					<view v-else class="pb-30">
					   <emptyPage title="暂无酒店介绍～" :noImage="`${domain}/static/images/noRecord.png`"></emptyPage>
					</view>
				</view>
				<!-- 酒店介绍 -->
				<!-- 酒店政策 -->
				<view  v-if="itemt.indext==2"  class="bg-white pb-20 mt-10">
					<view >
						<view class="display-flex display-flex-align-center pd-10">
							<view class="text-16 text-black ft-w700">
								酒店政策
							</view>
							
						</view>
						<view v-if="hotelInfo.go_to_detail" class="mb-10">
							<view class="display-flex display-flex-align-center ml-10">
								<image style="width: 15px;height: 15px;" src="https://qiniu.gzyxly.cn/attach/2025/11/16/b081ff69d1290b9c8053a10f49cd0168.png"></image>
							    <view class="text-black ft-w700 text-14 ml-5">入离时间</view> 
							</view>
							<view v-if="hotelInfo.go_to_detail" class="zc-list">
								<!-- <view style="width: 100%;overflow: hidden;" v-html="hotelInfo.scenic_detail"></view>	 -->
								<jyf-parser :html="hotelInfo.go_to_detail" ref="article" :tag-style="tagStyle"></jyf-parser>
							</view>
						</view>
						<view v-if="hotelInfo.child_bed_detail" class="mb-10">
							<view class="display-flex display-flex-align-center ml-10">
								<image style="width: 15px;height: 15px;" src="https://qiniu.gzyxly.cn/attach/2025/11/16/09dc3c2ce3c25b33e48684de7b6cd0e0.png"></image>
							    <view class="text-black ft-w700 text-14 ml-5">儿童及加床</view> 
							</view>
							<view v-if="hotelInfo.child_bed_detail" class="zc-list">
								<!-- <view style="width: 100%;overflow: hidden;" v-html="hotelInfo.scenic_detail"></view>	 -->
								<jyf-parser :html="hotelInfo.child_bed_detail" ref="article" :tag-style="tagStyle"></jyf-parser>
							</view>
						</view>
						<view v-if="hotelInfo.reception_detail" class="mb-10">
							<view class="display-flex display-flex-align-center ml-10">
								<image style="width: 15px;height: 15px;" src="https://qiniu.gzyxly.cn/attach/2025/11/16/33676b8e75e05af0a09a7ecc39adc71e.png"></image>
							    <view class="text-black ft-w700 text-14 ml-5">接待提示</view> 
							</view>
							<view v-if="hotelInfo.reception_detail" class="zc-list">
								<!-- <view style="width: 100%;overflow: hidden;" v-html="hotelInfo.scenic_detail"></view>	 -->
								<jyf-parser :html="hotelInfo.reception_detail" ref="article" :tag-style="tagStyle"></jyf-parser>
							</view>
						</view>
						<view v-if="hotelInfo.check_in_detail" class="mb-10">
							<view class="display-flex display-flex-align-center ml-10">
								<image style="width: 15px;height: 15px;" src="https://qiniu.gzyxly.cn/attach/2025/11/16/f864f469da7567437b377cf7fa850866.png"></image>
							    <view class="text-black ft-w700 text-14 ml-5">入住提示</view> 
							</view>
							<view v-if="hotelInfo.check_in_detail" class="zc-list">
								<!-- <view style="width: 100%;overflow: hidden;" v-html="hotelInfo.scenic_detail"></view>	 -->
								<jyf-parser :html="hotelInfo.check_in_detail" ref="article" :tag-style="tagStyle"></jyf-parser>
							</view>
						</view>
						<view v-if="hotelInfo.pet_detail" class="mb-10">
							<view class="display-flex display-flex-align-center ml-10">
								<image style="width: 15px;height: 15px;" src="https://qiniu.gzyxly.cn/attach/2025/11/16/dcf0d5d9125cb0ab643ff4d754f965df.png"></image>
							    <view class="text-black ft-w700 text-14 ml-5">宠物</view> 
							</view>
							<view v-if="hotelInfo.pet_detail" class="zc-list">
								<!-- <view style="width: 100%;overflow: hidden;" v-html="hotelInfo.scenic_detail"></view>	 -->
								<jyf-parser :html="hotelInfo.pet_detail" ref="article" :tag-style="tagStyle"></jyf-parser>
							</view>
						</view>
						<view v-if="hotelInfo.breakfast_detail" class="mb-10">
							<view class="display-flex display-flex-align-center ml-10">
								<image style="width: 15px;height: 15px;" src="https://qiniu.gzyxly.cn/attach/2025/11/16/382cab4f586cdea52fc6aa764e1ba3c3.png"></image>
							    <view class="text-black ft-w700 text-14 ml-5">早餐</view> 
							</view>
							<view v-if="hotelInfo.breakfast_detail" class="zc-list">
								<!-- <view style="width: 100%;overflow: hidden;" v-html="hotelInfo.scenic_detail"></view>	 -->
								<jyf-parser :html="hotelInfo.breakfast_detail" ref="article" :tag-style="tagStyle"></jyf-parser>
							</view>
						</view>
						<view v-if="hotelInfo.charge_detail" class="mb-10">
							<view class="display-flex display-flex-align-center ml-10">
								<image style="width: 15px;height: 15px;" src="https://qiniu.gzyxly.cn/attach/2025/11/16/3cc6b3e2d5e435a482090b6d09ab9cca.png"></image>
							    <view class="text-black ft-w700 text-14 ml-5">收费说明</view> 
							</view>
							<view v-if="hotelInfo.charge_detail" class="zc-list">
								<!-- <view style="width: 100%;overflow: hidden;" v-html="hotelInfo.scenic_detail"></view>	 -->
								<jyf-parser :html="hotelInfo.charge_detail" ref="article" :tag-style="tagStyle"></jyf-parser>
							</view>
						</view>
						<view v-if="hotelInfo.yd_detail" class="mb-10">
							<view class="display-flex display-flex-align-center ml-10">
								<image style="width: 15px;height: 15px;" src="https://qiniu.gzyxly.cn/attach/2025/11/16/72a09835aeab96a47be2d4dfde170268.png"></image>
							    <view class="text-black ft-w700 text-14 ml-5">预订提示</view> 
							</view>
							<view v-if="hotelInfo.yd_detail" class="zc-list">
								<!-- <view style="width: 100%;overflow: hidden;" v-html="hotelInfo.scenic_detail"></view>	 -->
								<jyf-parser :html="hotelInfo.yd_detail" ref="article" :tag-style="tagStyle"></jyf-parser>
							</view>
						</view>

					</view>
					
				</view>
				<view  v-if="itemt.indext==3"  class="bg-white pb-20 mt-10">
					<view >
						<view class="display-flex display-flex-align-center pd-10">
							<view class="text-16 text-black ft-w700">
								酒店设施
							</view>
							
						</view>
						<view v-if="hotelInfo.hotel_facility_data&&hotelInfo.hotel_facility_data.length">
							<view class="mb-10" v-if="facility_par.children && facility_par.children.length" v-for="facility_par in hotelInfo.hotel_facility_data" >
								<view class="display-flex display-flex-align-center ml-10">
								    <view class="text-black ft-w700 text-14 ml-5">{{facility_par.cate_name}}</view> 
								</view>
								<view class="ss-list ml-15">
									<view v-for="facility in facility_par.children" class="ss-list-item ">
										<view class="">
											{{facility.cate_name}}
										</view>
									</view>
								</view>
							</view>
							
						</view>
						
						
				
					</view>
					
				</view>
			</view>	
		</view>
		
	
		<uni-popup  ref="bindmobile" type="bottom" background-color="#fff">
			<view class="popup-header">
				<view class="popup-title">
					选择日期
				</view>
				<view @click="colseDate" class="popup-close1 iconfont icon-ic_close text-18">	</view>
			</view>
			<scroll-view :scroll-y="true" class="bg-white br-8" style="height: 500px;">
				
			 <calendar :is-show="true"  :start-date="startDate" :end-date="endDate" mode="2"  @callback="getDate" />
			</scroll-view>
		</uni-popup>
		
		
		<wloading  ref="loading"  />
	</view>
</template>

<script>
	import {getHotelDetailApi, getHotelRoomTypeApi} from '@/api/hotel'
	import userEvaluation from '@/components/userEvaluation';
	
	// import {postCartAdd,getProductHot} from '@/api/store'
	import emptyPage from '@/components/emptyPage.vue'
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import { HTTP_REQUEST_URL } from '@/config/app';
	import { mapGetters } from "vuex";
	import { toLogin } from '@/libs/login.js';
	import dayjs from '@/utils/day.js'
	import util from '@/utils/util.js'
	import { configMap } from "@/utils";
	import Cache from '@/utils/cache';
	import { CITY_INFO ,USER_LOCATION} from '@/config/cache'
	import calendar from '@/components/mobile-calendar-simple/Calendar.vue'
	
	let app = getApp();
	var sysHeight = uni.getSystemInfoSync().statusBarHeight;

	export default {
		components: {
			userEvaluation,emptyPage,jyfParser,calendar
		},
	
		computed: configMap({no_image: "https://qiniu.gzyxly.cn/def/3ce36202509191258161967.jpg"}, 
		mapGetters(['uid','isLogin','viewColor','keyColor'])),
		
		data() {
			return {
				tagStyle: {
					img: 'width:100%;display:block;margin-top:10px;border-radius: 8px;',
					video: 'width:100%;'
				},
				domain: HTTP_REQUEST_URL,
				navH: '',
				opacity: 0,
				homeTop: 59,
				isDate:1,
				hostProduct: [],
				buyNoticeShow:false,
				skeleton:true,
				height: 64, //header高度
				top: 44, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				iconOpcity: 0.5,
				noticeShow: false,
				noticeStr: '',
				ticketInfo: {},
				hotelInfo: '',
		
				toView: "",
				lock: false,
				number: "",
				height: 0,
				hightArr: [],
				navActive: 0,
				tabList: [
					{
						title: '酒店房型',
						filled: true,
						id: '#atc1',
						data:'',
						indext: 0
					},
					{
						title: '酒店详情',
						filled: false,
						id: '#atc2',
						data:'',
						indext: 1
					},
					{
						title: '酒店政策',
						filled: false,
						id: '#atc3',
						data:'',
						indext: 2
					},
					{
						title: '酒店设施',
						filled: false,
						id: '#atc4',
						data:'',
						indext: 3
					},
				],
				tabIndex: 0,
				tabBoxTop: '',
				scrollHeight: 0,
				tabLeft: 0, // 控制tab栏滚动位置
				scrollList: [], // 文章的滚动参数
				scrollLeftList: [], // tab栏滚动参数
				isRun: false ,// 是否正在滚动
				replyCount: 0,
				replyChance: 0,
				reply: [],
				storeInfo: '',
				id: '',
				scrollTop:0,
				toppx: 0,
				where: {
					lng: '',
					lat: ''
				},
				mdStartDate: '',
				mdEndDate: '',
				mdStartDateDsc: '',
				mdEndDateDsc: '',
				dayCount: '',
				roomTypeWhere:{
					start_date:'',
					end_date:''
				},
				roomTypeList: [],
				flag: 0,
			};
		},
		onLoad(options) {
			var that = this;
			this.id = options.id;
			
			this.roomTypeWhere.start_date = options.start_date?options.start_date:'';
			this.roomTypeWhere.end_date = options.end_date?options.end_date:'';
			this.dayCount =  this.calculateStayDays(this.roomTypeWhere.start_date,this.roomTypeWhere.end_date);
			this.mdStartDate = this.ymdToMd(this.roomTypeWhere.start_date);
			this.mdEndDate = this.ymdToMd(this.roomTypeWhere.end_date);
			this.mdStartDateDsc =  this.formatDateToRelative(this.roomTypeWhere.start_date);
			this.mdEndDateDsc =  this.formatDateToRelative(this.roomTypeWhere.end_date);
			
			// that.navH = app.globalData.navHeight+10;
			uni.getSystemInfo({
				success: function(res) {
					console.log('res',res)
					that.navH = res.statusBarHeight * (750 / res.windowWidth) + 100;
					// that.navH = app.globalData.navHeight+10;
					console.log('that.navH',that.navH)
				}
			});
			// #ifdef APP-PLUS || MP-ALIPAY
			that.homeTop = (that.sysHeight + 8)*2;
			// #endif
			// #ifdef H5
			that.homeTop = 10;
			// #endif
			const windowHeight = uni.getSystemInfoSync().windowHeight;
			console.log('windowHeight',windowHeight)
			
			// that.scrollHeight = windowHeight -this.rpxToPx(this.navH + 120)
			
		},
		onReady() {
			this.getDetail(this.id)
			this.getHotelRoomType(this.id)
			// this.get_host_product()
			this.$nextTick(function() {
				// #ifdef MP-WEIXIN
				const menuButton = uni.getMenuButtonBoundingClientRect();
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#home')
					.boundingClientRect(data => {
						this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
					})
					.exec();
				// #endif
			});
			
			
		},
		onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			var that = this,
			scrollY = e.scrollTop;
			that.scrollTop = e.scrollTop;
			var opacity = scrollY / 200;
			opacity = opacity > 1 ? 1 : opacity;
			that.$set(that, 'opacity', opacity);
			that.toppx = that.pxToRpx(e.scrollTop)
			let scrollArr = this.hightArr;
			if (this.lock) {
				this.$set(this, 'lock', false);
				return;
			}
			// console.log('e.scrollTop',e.scrollTop)
			// for (let i = 0; i < scrollArr.length; i++) {
			// 	if (e.scrollTop >= 0 && e.scrollTop < scrollArr[1] - scrollArr[0]) {
			// 		this.navActive = 0
			// 	} else if (e.scrollTop >= scrollArr[i] - scrollArr[0] && e.scrollTop < scrollArr[i + 1] - scrollArr[0]) {
			// 		this.navActive = i
			// 	} else if (e.scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
			// 		this.navActive = scrollArr.length - 1
			// 	}
			// }
			for (let i = 0; i < that.hightArr.length; i++) {
				if (e.scrollTop + this.rpxToPx(this.navH+120) >= that.hightArr[i] && e.scrollTop - this.rpxToPx(this.navH+120) <= that.hightArr[i]) {
					this.navActive = i
					return;
				}
			}
			// 防止在滚动过程中多次触发事件
			if (that.isRun) {
				return;
			}
			// 如果某一个元素接近顶部,触发tab切换效果
			for (let i = 0; i < that.scrollList.length; i++) {
				if (e.scrollTop + this.rpxToPx(this.navH+120) >= that.scrollList[i] && e.scrollTop - this.rpxToPx(this.navH+120) <= that.scrollList[i]) {
					that.tabClick(i);
					return;
				}
			}
		},
		
		methods: {
			preRoomImage(images, index){
				uni.previewImage({
					current: index,
					loop: true,
					urls: images,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			preHotelImage(images, index){
				uni.previewImage({
					current: index,
					loop: true,
					urls: images,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getDate(e){
				console.log(e)
				this.roomTypeWhere.start_date = e.startStr.dateStr;
				this.roomTypeWhere.end_date = e.endStr.dateStr;
				this.mdStartDate = this.ymdToMd(this.roomTypeWhere.start_date);
				this.mdEndDate = this.ymdToMd(this.roomTypeWhere.end_date);
				this.mdStartDateDsc =  this.formatDateToRelative(this.roomTypeWhere.start_date);
				this.mdEndDateDsc =  this.formatDateToRelative(this.roomTypeWhere.end_date);
				this.dayCount = e.dayCount;
				this.getHotelRoomType(this.id)
				this.$refs.bindmobile.close()
			},
			colseDate(){
				this.$refs.bindmobile.colse()
			},
			openDate(){
				this.$refs.bindmobile.open()
			},
			calculateStayDays(checkinDateStr, checkoutDateStr) {
			  // 1. 解析日期为 Date 对象
			  const checkinDate = new Date(checkinDateStr);
			  const checkoutDate = new Date(checkoutDateStr);
			  
			  // 2. 验证日期有效性（格式是否正确）
			  if (isNaN(checkinDate.getTime()) || isNaN(checkoutDate.getTime())) {
			    return "无效日期，请使用 YYYY-mm-dd 格式";
			  }
			  
			  // 3. 统一设置时间为 00:00:00，仅比较“年月日”
			  checkinDate.setHours(0, 0, 0, 0);
			  checkoutDate.setHours(0, 0, 0, 0);
			  
			  // 4. 检查离店日期是否晚于入住日期
			  if (checkoutDate <= checkinDate) {
			    return "离店日期必须晚于入住日期";
			  }
			  
			  // 5. 计算天数差（毫秒差转换为天数）
			  const timeDiff = checkoutDate - checkinDate; // 毫秒差
			  const days = timeDiff / (1000 * 60 * 60 * 24); // 转换为天数
			  
			  // 返回整数天数（因时间已统一为0点，结果必为整数）
			  return Math.floor(days);
			},
			formatDateToRelative(dateStr) {
			  // 解析目标日期并验证有效性
			  const targetDate = new Date(dateStr);
			  if (isNaN(targetDate.getTime())) {
			    return "无效日期（格式应为 YYYY-mm-dd）";
			  }
			  
			  // 统一将时间设为 00:00:00，避免时分秒影响
			  targetDate.setHours(0, 0, 0, 0);
			  
			  // 获取今天的日期（同样设为 00:00:00）
			  const today = new Date();
			  today.setHours(0, 0, 0, 0);
			  
			  // 计算两个日期的天数差
			  const timeDiff = targetDate - today;
			  const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
			  
			  // 判断并返回结果
			  if (dayDiff === 0) {
			    return "今天";
			  } else if (dayDiff === 1) {
			    return "明天";
			  } else if (dayDiff === 2) {
			    return "后天";
			  } else {
			    // 转换为星期几（getDay() 返回 0-6，0 是周日，1 是周一...）
			    const weekdays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
			    return weekdays[targetDate.getDay()];
			  }
			},
			ymdToMd(ymdStr) {
			  // 分割字符串为 [年, 月, 日]
			  const parts = ymdStr.split('-');
			  // 校验格式是否正确（避免非 yyyy-m-d 格式的输入）
			  if (parts.length !== 3) {
				return this.$util.Tips({title: '请输入正确的 yyyy-m-d 格式日期'})
			  }
			  // 拼接 月-日 并返回
			  return `${parts[1]}-${parts[2]}`;
			},
			callPhone: function (phone) {
				const regex = /^1[3456789]\d{9}$/;//使用此正则即可
				if (!regex.test(phone)){
					return this.$util.Tips({
						title: '手机号不正确'
					}); 
				}
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			
			openNotice(){
				this.$refs.notieRef.open()
			},
			closeNotice(){
				this.$refs.noticeRef.close()
			},
			/**
			 * 获取我的推荐
			 */
			get_host_product: function() {
				let that = this;
				if(that.hotScroll) return
				getProductHot(
					that.hotPage,
					that.hotLimit,
				).then(res => {
					that.hotPage++
					that.hotScroll = res.data.length<that.hotLimit
					that.hostProduct = that.hostProduct.concat(res.data)
				});
			},
		
			infoScroll: function() {
				let that = this;
				 
				//设置产品列表高度
				uni.getSystemInfo({
					success: function(res) {
						that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
					},
				});
				let height = 0;
				let hightArr = [];
				const query = uni.createSelectorQuery();
				query.selectAll('.conter > .listw').boundingClientRect();
				query.exec(function(res) {
					console.log(res[0]);
					let items = res[0];
					let scrollList = [];
					for (let i in items) {
						let nowS = 0;
						nowS = items[i].top ;
						scrollList.push(nowS);
					}
					that.hightArr = scrollList;
					console.log("hightArr",that.hightArr)
				});
				// for (let i = 0; i < len; i++) {
				// 	//获取元素所在位置
				// 	let query = uni.createSelectorQuery();
				// 	let idView = "#b" + i;
				// 	query.select(idView).boundingClientRect();
				// 	query.exec(function(res) {
				// 		let top = res[0].top;
				// 		hightArr.push(top);
				// 		that.hightArr = hightArr
				// 	});
				// };
				console.log("hightArr",that.hightArr)
			},
			rpxToPx(rpx) {
			  // 获取设备的宽度
			  const windowWidth = uni.getSystemInfoSync().windowWidth;
			  // 将rpx转换为px，1rpx等于0.5px，设备宽度是基于750rpx
			  const px = (rpx / 750) * windowWidth;
			  return px;
			},
			pxToRpx(px, designWidth = 750) {
			    let screenWidth = uni.getSystemInfoSync().windowWidth;
			    return (px * designWidth / screenWidth);
			},
			scroll: function(e) {
				let scrollTop = e.detail.scrollTop;
				let scrollArr = this.hightArr;
				if (this.lock) {
					this.$set(this, 'lock', false);
					return;
				}
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
						this.navActive = 0
					} else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[
							0]) {
						this.navActive = i
					} else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
						this.navActive = scrollArr.length - 1
					}
				}
				uni.$emit('scroll');
			},
			
			back: function() {
				uni.navigateBack();
			},
			showDetail(index){
				for(var i = 0; i< this.roomTypeList.length; i++){
					if(i == index){
						this.$set(this.roomTypeList[i],'is_open',!this.roomTypeList[i]['is_open'])
					} else {
						this.$set(this.roomTypeList[i],'is_open',false)
					}
				}
				this.flag++
			},
			getHotelRoomType(id){
				var that = this;
		
				getHotelRoomTypeApi(id,that.roomTypeWhere).then(res => {
					this.roomTypeList = res.data;
					for(var i = 0; i< this.roomTypeList.length; i++){
						this.roomTypeList[i].is_open = false;
					}
				
				}).catch(err => {
					this.$util.Tips({
						title:err
					},{
						tab: 3,
						url: 1
					})
				})
			},
			getDetail(id){
				var that = this;
				this.$refs.loading.open();
				if(Cache.has(USER_LOCATION)){
					var userLoc = JSON.parse(Cache.get(USER_LOCATION));
					that.where.lng  = userLoc.lng;
					that.where.lat  = userLoc.lat;
				}
				getHotelDetailApi(id,that.where).then(res => {
					this.hotelInfo = res.data;
					// that.$set(that, 'reply', res.data.topReply ? [res.data.topReply] : []);
					// that.$set(that, 'replyCount', res.data.replayData && res.data.replayData.count);
					// that.$set(that, 'replyChance', res.data.replayData && res.data.replayData.rate);
					// // #ifndef MP-ALIPAY
					// that.$nextTick(res => {
					// 	that.infoScroll();
					// })
					// // #endif
					
				   this.initTab();
					
			
					that.$nextTick(res => {
						that.infoScroll();
					})
									
					this.$refs.loading.close();
				}).catch(err => {
					this.$refs.loading.close();
					this.$util.Tips({
						title:err
					},{
						tab: 3,
						url: 1
					})
				})
			},
			initTab() {
				let that = this;
		
				// 获取渲染完成后的各个元素滚动参数
				setTimeout(function() {
					// 文章列表参数
					const query = uni.createSelectorQuery();
					query.selectAll('.artbox > .article').boundingClientRect();
					query.exec(function(res) {
						console.log(res[0]);
						let items = res[0];
						let scrollList = [];
						for (let i in items) {
							let nowS = 0;
							nowS = items[i].top - that.rpxToPx(that.navH+120);
							scrollList.push(nowS);
						}
						that.scrollList = scrollList;
						console.log(scrollList);
					});
		
					// tab栏参数
					const query2 = uni.createSelectorQuery();
					query2.selectAll('.tabbox > .tabbox-tab').boundingClientRect();
					query2.exec(function(res) {
						console.log(res[0]);
						let items = res[0];
						let scrollLeftList = [];
						for (let i in items) {
							let nowS = 0;
							nowS = items[i].left - 10;
							scrollLeftList.push(nowS);
						}
						that.scrollLeftList = scrollLeftList;
					});
				}, 100);
			},
			changeMealTab: function(index, id) {
				console.log(index, id)
				let that = this;
				// this.toView = id;
				this.navActive = index;
				if (that.isRun) {
					return;
				}
				that.isRun = true;
						
				// 滚动到指定文章的高度
				uni.pageScrollTo({
					scrollTop: that.hightArr[index]  - this.rpxToPx(this.navH+120),
					complete: function() {
						that.isRun = false;
					}
				});
				// console.log("this.rpxToPx(640)",this.rpxToPx(640))
				// // this.tabBoxTop = (this.navH+120) - 100*index
				// uni.pageScrollTo({
				//   scrollTop: this.rpxToPx(640) - 10, // 滚动到距离页面顶部100px的位置
				//   duration: 0 // 滚动动画的持续时间，必须为0
				// });
				
				// this.$set(this, 'lock', true);
				// uni.$emit('scroll');
			},
		
			// 点击tab栏
			pageScroll(index) {
				let that = this;
		
				if (that.isRun) {
					return;
				}
		
				that.tabClick(index);
				that.isRun = true;
		
				// 滚动到指定文章的高度
				uni.pageScrollTo({
					scrollTop: that.scrollList[index],
					complete: function() {
						that.isRun = false;
					}
				});
			},
			
		
			// 改变tab栏显示参数
			tabClick(index) {
				let that = this;
				let arr = that.tabList;
				arr.map(item => {
					item.filled = false;
				});
				arr[index].filled = true;
				that.tabList = arr;
				let nowleft = (that.arcWidth - 80) / 2; // 加入一点左边距，这样就不会贴着左边
				that.tabLeft = that.scrollLeftList[index] - nowleft;
			},
			
			
			goIntro(){
				uni.navigateTo({
					url:"/pages/scenic/intro/index?id="+this.hotelInfo.id
				})
			},
	
			
			openLimitRefund:function(item){
				this.storeInfo = item
				this.$refs.limitRef.open()
			},
			closeLimitRefund(){
				this.$refs.limitRef.close()
				this.storeInfo = ''
			},
			toRegularDetail:function(item, meal){
				var that = this;
				// console.log(item)
				if (meal.stock <= 0 )
					return that.$util.Tips({
						title: "房源不足"
					});
					

			
				
				if(!meal.is_buy){
					uni.showModal({
					    title: '温馨提示',
					    content: meal.reason,
						showCancel: false,
						confirmText: '我已知晓',
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				} else{
					
					
					this.goBuy(item,meal);
					
				}
				
				
			},
			
			goBuy(roomType,pack){
				
				if (!this.isLogin) {
					toLogin()
					return;
				} 
				
				
				if(!roomType.is_show){
				 return	this.$util.Tips({title: '该房型已下架'})
				}
				if(!pack.status){
				 return	this.$util.Tips({title: '该套餐已下架'})
				}
		
				uni.navigateTo({
					url: '/pages/hotel/order_confirm?hotel_id=' + roomType.hotel_id
					+'&room_type_id='+roomType.id
					+'&package_id='+pack.id
					+'&start_date='+this.roomTypeWhere.start_date
					+'&end_date='+this.roomTypeWhere.end_date
					
				});
				
			},
			
			goScenicArea: function(lng,lat,name) {
	
				uni.openLocation({
					//​使用微信内置地图查看位置。
					latitude:  parseFloat(lat),
					longitude: parseFloat(lng),
					name: name,
				});
			},
			
		},
		

	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F8F8F8;
	}
	.carousel {
		height: 400upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 400upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.introduce-block {
		border-radius: 8px;
		position: relative;
		margin-top: -10px;
		background-color: #FFFFFF;
	}

	.notice {
		height: 40px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		background-color: #fef3f2;
	}

	.grade-block {
		border-radius: 2px;
		color: #fff;
		font-weight: 700;
		background: linear-gradient(-90deg,#cf7632,#f8b891);
		width: 20px;
		line-height: 15px;
		height: 15px;
		text-align: center;
		font-size: 10px;
		margin-left: 4px;
		padding: 0 2px;
		align-items: center;
		justify-content: center;
	}

	.ticket-block {
		margin-left: 6px;
		margin-right: 6px;
		border-radius: 8px;
		margin-top: 10px;
		background-color: #FFFFFF;
	}

	.content {
		padding: 24rpx;
	}
	
	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 995;
	}
	
	.tui-header {
		width: 100%;
		font-size: 18px;
		line-height: 18px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-header-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}
	
	.tui-header-icon .tui-badge {
		background: #e41f19 !important;
		position: absolute;
		right: -4px;
	}
	
	.tui-icon-ml {
		margin-left: 20rpx;
	}
	
	.tui-icon-box {
		position: relative;
		height: 32px !important;
		width:32px !important;
		padding: 6px !important;
	
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.back {
		font-size: 20px;
		// font-weight: 600;
		line-height: 32px;
		// margin-left: 10px;
		// margin-bottom: 5px;
	}
	.mp-ticketcontent-title{
		font-size: 17px;
		color: #333;
		letter-spacing: -.4px;
		font-weight: 700;
		 margin-bottom: 14px;
	}
	.m_desc_item {
		padding-bottom: 14px;
		display: flex;
		flex-direction: row;
	}
	.m_desc_item_content{
		flex: 1;
	}
	.m_title_border {
		width: 69px;
		border: .5px solid #ffc899;
		border-radius: 2px;
		text-align: center;
		height: 21px;
		color: #f70;
		font-size: 13px;
		font-weight: 700;
	}
	.m_desc_item_name {
	    width: 25%;
	}
	
	.item-title {
		font-size: 28upx;
		font-weight: bold;
		padding: 10upx 0 0 0;
	
	}
	.navbar {
		position: fixed;
		background-color: #fff;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
	}
	.head-menu-new {
		display: flex;
		align-items: center;
		height: 60rpx;
		width: 60rpx;
		// background: rgba(0, 0, 0, .25);
		border: 0.5rpx solid #cecece;
		border-radius: 50%;
		.iconfont {
			flex: 1;
			text-align: center;
			// color: #fff;
			font-size: 18px;
			box-sizing: border-box;
			&.icon-ic_leftarrow {
				border-right: 1px solid #fff;
			}
		}
	}
	.navbar-title{
		display: flex;
		// align-items: center;
		color: #000;
		font-size: 16px;
		justify-content: center;
	}
	
	::v-deep uni-scroll-view {
		padding-bottom: 0 !important;
	}
	
	
	
	.productSort {
		display: flex;
		flex-direction: column;
		//#ifdef MP
		// height: calc(100vh - var(--window-top)) !important;
		//#endif
		//#ifndef MP
		// height: 100vh 
		//#endif
	}
	
	
	.productSort .scroll-box {
		// flex: 1;
		// overflow: hidden;
		display: flex;
	}
	
	// #ifndef MP
	uni-scroll-view {
		padding-bottom: 100rpx;
	}
	
	// #endif
	
	.productSort .aside {
		width: 180rpx;
		overflow: hidden;
		background-color: #f7f7f7;
		position: sticky;
		align-self: flex-start;
	}
	
	.productSort .aside .item {
		height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
		text-align: center;
	}
	
	.productSort .aside .item.on {
		background-color: #fff;
		border-left: 4rpx solid var(--view-theme);
		width: 100%;
		color: var(--view-theme);
		font-weight: bold;
	}
	
	.productSort .conter {
		flex: 1;
		height: 100%;
		overflow: hidden;
		padding: 0 14rpx;
		background-color: #fff;
		position: relative;
		padding-bottom: 20rpx;
	}
	
	.productSort .conter .listw {
		padding-top: 20rpx;
	}
	
	.productSort .conter .listw .title {
		height: 45px;
	}
	
	.productSort .conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}
	
	.productSort .conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}
	
	.productSort .conter .list {
		flex-wrap: wrap;
	}
	
	.productSort .conter .list .item {
		width: 245rpx;
		margin-top: 26rpx;
		border: 1px solid #ececec;
		border-radius: 5px;
		height: 40px;
		// line-height: 40px;
		margin-right: 10px;
		padding: 0 5px;
		justify-content: center;
	}
	
	.productSort .conter .list .item .picture {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	
	// .productSort .conter .list .item .picture image {
	// 	width: 100%;
	// 	height: 100%;
	// 	border-radius: 50%;
	// }
	
	.productSort .conter .list .item .picture {
	
		::v-deep ,
		::v-deep image,
		::v-deep .easy-loadimage,
		::v-deep uni-image {
	
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
	}
	
	.productSort .conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		// height: 40px;
		// line-height: 40px;
		// width: 200rpx;
		text-align: center;
		color: #000;
	}
	.tab-box{
		position: sticky;
		width: 100%;
		z-index: 20;
		border-radius: 12px 12px 0 0;
		background-color: #fff;
		box-shadow: 0 -1px #fff;
	}
	.tab-box-view{
		position: relative;
		height: 120rpx;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.tab-box-item{
		height: 100%;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex: 1;
		position: relative;
	}
	.tab-box-text {
		font-size: 20PX;
		line-height: 20PX;
		color: #111;
	}
	.tab-box-text-line{
		width: 34PX;
		height: 4PX;
		position: absolute;
		bottom: 12PX;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 2PX;
		background-image: linear-gradient(to right, rgb(113, 168, 246), rgb(0, 102, 246));
	}
	/*隐藏滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	
	.scrbox {
		position: sticky;
		width: 100%;
		z-index: 20;
		border-radius: 12px 12px 0 0;
		background-color: #fff;
		box-shadow: 0 -1px #fff;
		
	}
	
	.scrollbox {
		width: 100vw;
		box-sizing: border-box;
		position: relative;
		height: 100rpx;
		.tabbox {
			display: flex;
			flex-wrap: nowrap;
			box-sizing: content-box;
			background-color: #fff;
			height: 44px;
			.tabbox-tab {
				font-size: 14px;
				flex: 1;
				display: flex;
			    position: relative;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.tab-filled{
		// color: #23beae;
	}
	.tab-filled:before {
			position: absolute;
			width: 40rpx;
			height: 8rpx;
			background-repeat: no-repeat;
			content: "";
			background-image: linear-gradient(to right, var(--view-theme) 0%, #bfe7d9 100%);
			bottom: -10rpx;
			left: 50%;
			margin-left: -28rpx;
			top: 35px;
			border-radius: 4px;
		}
	
	.tabox-tab:first-child {
		margin-left: 0;
	}
	.userEvaluation {
	    margin-top: 20rpx;
	    background-color: #fff;
	}
	.userEvaluation .title {
	    height: 86rpx;
	    font-size: 28rpx;
	    color: #282828;
	    margin-left: 20rpx;
	    padding-right: 20rpx;
	}
	.userEvaluation .title  .praise {
	    font-size: 28rpx;
	    color: #999;
	}
	
	.centent-list {
	    margin-top: 12px;
	    padding: 0 12px;
	}
	.zc-list{
	    margin-top: 10px;
	    padding: 0 10px;
		margin-left: 15px;
	}
	.yuding-btn{
		height: 40px;
		line-height: 40px;
		width: 40px; 
		background-image: linear-gradient(to right,#fd860c, #fd5f33);
		border-radius: 8px;
		color: #FFFFFF;
		text-align: center;
	}
	.cost-table{
		border-radius: 10px;
		border: 1px solid #dde4ed
	}
	.cost-table-title{
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #f6f8fa;
		border-radius: 10px 10px 0 0;
		padding: 10px;
	}
	.cost-table-td{
		display: flex;
		flex-direction: row;
		min-height: 30px;
		border-bottom: 1px solid #dde4ed;
	}
	.cost-table-td:last-child {
	    border-bottom: none;
	}
	.cost-table-td-left{
		width: 100px;
		border-right: 1px solid #dde4ed;
		padding: 10px;
		font-size: 14px;
		color: #333;
		align-items: center;
	}
	.cost-table-td-right{
		display: flex;
		justify-content: center;
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		padding: 10px;
	}
	.address-box{
		background-image:url(https://qiniu.gzyxly.cn/attach/2025/11/16/14543ff02cecf9eeedd08316c0d9b29d.webp) ;
	    background-size: 100% 100%; ;
	}
	.item_tags{
		margin-top: 8px;
	}
	.item_tags .tags_item {
		display: inline-block;
		font-size: 20rpx;
		text-align: center;
		border-radius: 5rpx;
		padding: 0 4rpx;
		line-height: 28rpx;
		margin-right: 8rpx;
	}
	.item_tags .tags_item.ticket{
		color: #E93323;
		border: 1px solid #E93323;
	}
	.item_tags .tags_item.delivery{
		color: #FF9000;
		border: 1px solid #FF9000;
	}
	.item_tags .tags_item.labels{
		color: var(--view-theme);
		// border: 1px solid #cad8f7;
		background: #d8f7f7;
		padding: 1px 5px;
	}
	.phone-text{
		color: var(--view-theme);
	}
	.ss-list{
		display: flex;
		flex-direction: row;
		font-size: 13px;
		color: #111;
		width: 100%;
		flex-wrap: wrap;
	}
	.ss-list-item {
	    min-width: 50%;
	    margin: 4px 0;
	    padding-left: 24px;
	    box-sizing: border-box;
	    align-items: center;
	}
	
	.regular-block {
		margin: 5px;
		    border-radius: 5px;
		border-radius: 5px;
		box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.08);
		background-color: #fff;
	}
	.regular-item{
		/* background-color: #FFFFFF; */
	}

	.plan-type-title{
		color: var(--view-theme);
		margin-top: 2px;
		padding: 0 4px;
		height: 20px;
		border: 1px solid var(--view-theme);
		border-radius: 3px;
		line-height: 20px;
		font-size: 10px;
		font-weight: 400;
		display: flex;
		align-items: center;
	}
	.return-bock{
		margin: 10px;
		border: 1px solid #f3f3f3;
		padding: 10px;
		border-radius: 5px;
		background: #fdfdfd;
	}
	.de-block{
		/* background-color: #fde3af; */
		padding: 0 5px 5px 5px;
	}
	.tc-block{
		width: 100%;
		background-color: #f5fbff;
		border-radius: 10px;
		padding: 5px 10px;
		height: 80px;
		margin-bottom: 8px;
	}
	.text-cancel{
		color: var(--view-theme);
	}
	.tc-head-shu{
		background-color: var(--view-theme);
		width: 3px;
		height: 12px;
		border-radius: 20px;
		margin-right: 5px;
	}
	.tc-bl-left {
		display: flex;
		flex-direction: column;
		margin-top: 5px;
	}
	.tc-bl-right {
		display: flex;
		justify-content: space-around;
		margin-left: auto;
		align-items: flex-end;
	}
	.tc-price{
		color: #fd7d21;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		margin-right: 5px;
	}
	.yud-button{
		background-color: #fd7d21;
		border-radius: 5px;
		color: #fff;
		padding: 5px 10px;
		font-size: 14px;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.no-yud-button{
		background-color: #cacaca;
		border-radius: 5px;
		color: #383838;
		padding: 5px 10px;
		font-size: 14px;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.image-hotel{
		width: 160rpx;
		height: 160rpx;
		// height: 240rpx;
		// min-height: 200px;
		// max-height: 250px;
		border-radius: 20rpx;
		margin: 10px
	}
	
	.hotel-price{
		margin-left: auto;
		margin-right: 15px;
		margin-bottom: 10px;
		justify-content: space-around;
		align-items: center;
	}
	.shu-hotel{
		display: inline-block;
		width: 0.5px;
		height: 10px;
		margin-left:5px;
		margin-right: 5px;
		background-color: rgb(197, 197, 197);
		opacity: 1;
	}
	.hotel-day{
		border-radius: 20px;
		border: 1px solid #000000;
		padding: 2px 8px;
		font-size: 12px;
		height: 16px;
		line-height: 20px;
		display: flex;
		align-items: center;
	}
	.filter{
		// filter: grayscale(0.8) brightness(0.9);
		opacity: 0.5;
	}
	.image-num-box{
		position: absolute;
		bottom: 20px;
		right: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.image-num{
		width: 12px;
		text-align: center;
		border-radius: 6px;
		background-color: rgba(255, 255, 255, 0.9);
		font-size: 8px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgb(17, 17, 17);
	}
</style>	